<template>
  <PostByChannelSkeleton v-if="loading"/>
  <view v-else>
    <u-navbar
        :autoBack="true"
        leftIconColor="white"
        :title-style="{color: 'white'}"
        bgColor="transparent"
    >
    </u-navbar>

    <view class="top" :style="{ backgroundImage: 'url(' + topicInfo.url + ')' }">
    </view>
    <navigator :url="`/pages/topic/topicInfo?id=${topicInfo.id}`"  class="top-left">
      <view style="display: flex;flex-direction: column">
        <view style="display: flex;align-items: center">
          <u-avatar shape="square" size="70" :src="topicInfo.url"></u-avatar>
          <view
              style="padding-left: 20px;color: white;display: flex;flex-direction: column;justify-content: flex-start">
            <text>{{ topicInfo.name }}</text>
            <text style="font-size: 14px">99999&nbsp;{{ topicInfo.nickname }}</text>
          </view>
        </view>
        <text class="u-line-1" style="color: #FFFFFF;padding: 20px 0;">{{ topicInfo.description }}</text>
      </view>

    </navigator>
    <view class="content">
      <BlogForPostByChannel v-if="postList?.length > 0" v-for="(item, index) in postList"
            :key="item.id" :post="item"/>
      <u-empty v-else
               mode="comment"
               text="恭喜你发现新大陆，快来发布内容占领吧"
               icon="https://cdn.uviewui.com/uview/empty/comment.png">
      </u-empty>

    </view>
  </view>
</template>

<script>
import {getPostByChannelId} from "@/api/article";
import Blog from "@/components/Blog.vue";
import {getChannelById} from "@/api/channel";
import BlogForPostByChannel from "@/components/BlogForPostByChannel.vue";
import PostByChannelSkeleton from "@/components/skeleton/PostByChannelSkeleton.vue";

export default {
  components: {PostByChannelSkeleton, BlogForPostByChannel, Blog},
  data() {
    return {
      topicInfo: {},
      loading: true,
      postList: [],
    };
  },
  onLoad(options) {
    this.getPostList(options.id)
    this.getTopicInfo(options.id)
    // this.getPostList(10)
    // this.getTopicInfo(10)
    this.$nextTick(() => {
      this.loading = false
    })
    // uni.setNavigationBarTitle({
    //   title: this.topicInfo.name
    // })
  },
  methods: {
    async getPostList(id) {
      const res = await getPostByChannelId(id)
      this.postList = res.data.data
    },
    async getTopicInfo(id) {
      const res = await  getChannelById(id)
      this.topicInfo = res.data
    }
  }
}
</script>

<style lang="scss" scoped>
.top {
  width: 100%;
  height: 14rem;
  position: relative; /* 如果需要将模糊背景置于内容之下 */

  background-size: cover; /* 或者contain, 或者具体的宽度和高度 */
  background-position: center;
  z-index: 0;

  /* 使用CSS滤镜实现高斯模糊 */
  -webkit-filter: blur(40px); /* 针对Webkit内核浏览器如Safari、Chrome等 */
  filter: blur(40px); /* 标准化滤镜语法，大多数现代浏览器支持 */
  overflow: hidden;


}

.top-left {
  overflow: hidden;
  display: flex;

  align-items: center;
  width: 100%;
  height: 14rem;
  padding: 60rpx 30rpx 30rpx 30rpx;
  z-index: 1;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.1);
  top: 0;
  left: 0;
}

.content {
  z-index: 999;
  width: 100%;
  position: absolute;
  background-color: white;
  margin-top: -25px;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  padding: 0.8rem 0 0 0;
  height: 72vh;
}

</style>
